TypeScript和JavaScript混合开发，这或许是配上单元测试的最佳实践

（给前端大全加星标，提升前端技能）

作者：前端巅峰 公号 / Peter 谭金杰

既然你选择了TypeScript，那么尽量不要使用any，特殊情况下可以用索引签名或者泛型解决

---

索引签名：

可以用字符串访问 JavaScript 中的对象（TypeScript 中也一样），用来保存对其他对象的引用

当你声明一个索引签名时，所有明确的成员都必须符合索引签名

例如:

// ok
interface Foo {
  [key: string]: number;
  x: number;
  y: number;
}

// Error
interface Bar {
  [key: string]: number;
  x: number;
  y: string; // Error: y 属性必须为 number 类型
}

---

当你有项目需要从javaScript迁移到TypeScript中时，有一部分同学做法是，把所有到文件从.js全部改成.ts，然后加上所有类型为any，这样完成快速迁移，但是其实不需要这样。

我们可以让TS和JS进行混合开发

---

还是不废话了，直接给一套配置吧，其实就是两点：

一、在项目根路径下使用tsc --init,生成tsconfig.json文件：

配置allowJs选择为：true

{
  "compilerOptions": {
    "jsx": "react",
    "target": "es5" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019' or 'ESNEXT'. */,
    "module": "commonjs" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */,
    "allowJs": true, /* Allow javascript files to be compiled. */
    "strict": true /* Enable all strict type-checking options. */,
    "forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */
  }
}

---

然后在webpack.base.config.js文件中配置loader处理.ts  .tsx代码文件

...
 extensions: ['.ts', '.tsx', '.js', '.jsx'],
 ...
{
            test: /\.ts(x?)$/,
            use: [
              {
                loader: 'babel-loader',
                options: {
                  //jsx语法
                  presets: [['@babel/preset-env', { modules: false }]],
                  cacheDirectory: true,
                },
              },
              {
                loader: 'awesome-typescript-loader',
              },
            ],
          },

这样你就可以使用JS和TS混合开发了，在这过程中，你并不需要使用any去完成快速迁移，因为当你全部使用any后，会导致不可预测的情况出现。而且后期还要重构那一部分。

当然，单元测试的代码配置也要改变，我平常使用的是JEST

---

setupEnzyme.ts文件

import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

Enzyme.configure({
  adapter: new Adapter(),
});

_test__文件夹下面的文件，也要改成.tsx .ts为后缀结尾

jest.config.js文件也要修改

const path = require('path');
module.exports = {
  roots: ['<rootDir>/test'],
  testRegex: 'test/(.+)\\.test\\.(jsx?|tsx?)$',
  transform: {
    '^.+\\.tsx?$': 'ts-jest',
  },
  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
  moduleNameMapper: {
    '\\.(css|less)$': 'identity-obj-proxy',
  },
  setupFilesAfterEnv: [path.resolve(__dirname, './setupEnzyme.ts')],
  testEnvironment: 'enzyme',
};

这样你就可以在JS中愉快的编写TS，互相引用，甚至使用愉快的使用单元测试

推荐阅读  点击标题可跳转

觉得本文对你有帮助？请分享给更多人

关注「前端大全」加星标，提升前端技能

好文章，我在看❤️